<template>
    <div class="contact-service" @click="closeHelp" @touchmove.prevent>
        <div class="box" @click.stop>
            <div class="service-card">
                <span class="title">选择联系客服</span>
                <div class="item online f14">
                    <div class="left">
                        <img src="@/assets/images/service-Popup-icon1.png">
                        <div class="text">
                            <span>在线客服</span>
                            <span>在线对话快速受理</span>
                        </div>
                    </div>
                    <span class="icon">></span>
                </div>
                <div class="item phone f14" @click="callPhone">
                    <div class="left">
                        <img src="@/assets/images/service-Popup-icon3.png">
                        <div class="text">
                            <span>平台服务</span>
                            <span>呼叫平台</span>
                        </div>
                    </div>
                    <span class="icon">></span>
                </div>
            </div>
            <img class="close" @click.stop="closeHelp" src="@/assets/images/close.png">
        </div>
    </div>
</template>
<script>
import phone from "@/common/PhoneNum";
export default {
    name: "ContactService",
    props: { closeHelp: Function },
    methods: {
        callPhone() {
            window.location.href = phone;
        },
    },

}
</script>
<style lang="scss" scoped>
.contact-service {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;

    .box {
        width: 280px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -20%;

        .service-card {
            padding: 20px;
            text-align: center;
            background-color: white;
            border-radius: 10px;
            width: 100%;
            padding-bottom: 35px;

            .item {
                padding: 8px 20px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                border-radius: 10px;

                .left {
                    display: flex;

                    img {
                        width: 25px;
                        margin-right: 20px;
                        object-fit: contain;
                    }

                    .text {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;

                        span {
                            &:nth-of-type(1) {
                                margin-bottom: 5px;
                            }

                            &:nth-of-type(2) {
                                color: #9a9a9a;
                            }
                        }
                    }
                }

            }

            .online {
                margin: 20px 0;
                border: 2px solid #48ebd0;

                .icon {
                    color: #48ebd0;
                    font-weight: bold;
                }
            }

            .phone {
                border: 2px solid #02a0e7;

                .icon {
                    color: #02a0e7;
                    font-weight: bold;
                }
            }
        }

        .close {
            margin-top: 10px;
            width: 30px;
            object-fit: contain;
        }
    }
}
</style>